<template>
  <div>
    <!--    head-->
    <!--    空骨架-->
<!--    <template>-->
<!--      <el-skeleton :animated="true"-->
<!--                   :throttle="500"-->
<!--                   :loading="loading"-->
<!--                   :rows="7"/>-->
<!--    </template>-->
<!--    v-if="!loading"-->
    <div >
      <el-descriptions title="编制询价书" :column="2" border>
        <el-descriptions-item label="询价书编号">
          {{ enquire.enquireNum}}
        </el-descriptions-item>
        <el-descriptions-item label="询价书名称">
          <el-input v-model="enquire.enquireName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="单位">
          {{ enquire.company }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          <el-input v-model="employee.empName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">
          <el-input v-model="employee.address"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <el-input v-model="employee.phone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系传真">
          <el-input v-model="employee.fax"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="邮编">
          <el-input v-model="employee.zip"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="Email">
          <el-input v-model="employee.email"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="报价截止时间">
          <el-input v-model="stockEntity.endDate" type="date"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <h4>我公司欲采购下述物资，如贵单位有兴趣，可参与网上报价。详细物资情况如下：</h4>

      <div v-for="(orders,index) in ordersList">
        <!--    需求计划  表格开始-->

        <div class="orders">
        <el-descriptions :title="'需求计划'+(index+1)" :column="2" border>
          <el-descriptions-item label="物资编码">
            {{ orders.materialNum }}
          </el-descriptions-item>
          <el-descriptions-item label="物资名称">
            {{orders.materialName}}
          </el-descriptions-item>
          <el-descriptions-item label="计量单位">
            {{ orders.measureUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="单价（元/含税）">
            <el-input v-model="orders.unitPrice"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="数量">
            <el-input v-model="orders.amount"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="总计（元）">
            <el-input v-model="orders.sumPrice"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="报价开始时间">
            <el-input v-model="orders.enquireDetail.quoteStartDate" type="date"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="报价截止时间">
            <el-input v-model="orders.enquireDetail.quoteEndDate" type="date"></el-input>
          </el-descriptions-item>

          <el-descriptions-item label="备注">
            <el-input type="textarea" v-model="orders.enquireDetail.remark"></el-input>
          </el-descriptions-item>

        </el-descriptions>
          <br>
        </div>
        <!--    需求计划  表格结束-->


      </div>
      <el-descriptions :column="1" border>
        <!--询价书备注-->
        <el-descriptions-item label="询价说明">
          <el-input type="textarea" v-model="enquire.remark"></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <!--    底部按钮-->
      <div class="bottom">
        <el-button type="primary" @click="submit('未发布')">提交</el-button>
        <el-button type="primary" @click="submit('已发布')">发布</el-button>
        <el-button @click="back">返回</el-button>

      </div>
    </div>
  </div>
</template>

<script>
import quote from "@/views/quote/index.vue";
import {cloneObj} from "@/utils";

export default {
  data() {
    return {
      id: '',
      stockEntity:{},
      enquire: {},
      ordersList:[],
      employee:{},
      loading: true,
    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.id = id
    this.getData()
  },
  methods: {
    getData() {
      this.$http({
        url: this.$http.adornUrl(`purchase/stock/stockDetail/${this.id}`),
        method: 'get',
      }).then((data) => {
        // console.log("详细信息",data);
        this.stockEntity = data.stockEntity
        this.enquire = data.stockEntity.enquire
        this.ordersList = data.stockEntity.ordersList
        this.employee = data.stockEntity.employee
        console.log("详细信息",this.stockEntity);
      }).catch((err) => {

      })
    },
    // 底部按钮
    // 提交
    submit(val) {
      this.$confirm('您确定信息正确并保存吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        //编制询价书
        this.$http({
          url:this.$http.adornUrl('/purchase/enquire/saveEnquire'),
          method:'post',
          data:{
            "enquire":this.enquire,
            "employee":this.employee,
            "ordersList":this.ordersList,
            "endDate":this.stockEntity.endDate,
            "id":this.stockEntity.id,
            "stockType":this.stockEntity.stockType,
            "status":val
          }
        }).then((data) => {
          console.log("新增询价表data",data)
          if (data.code === 200){
            console.log("编制询价书成功")
            this.$message({
              type: 'success',
              message: '询价书编制成功!'
            });
            this.$router.push({name: 'work-out1'})
          }else{
            console.log(data.msg)
            this.$message.error('询价书编制失败!');
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    back(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.head {

}

::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
  width: 150px
}

.materialName {
  font-weight: bold;
  font-size: 22px;
  margin: 10px 0;
  text-align: center;
}

::v-deep .el-descriptions__title {
  font-size: 25px;
  margin-right: 10px;
}

::v-deep .orders .el-descriptions__title {
  font-size: 15px;
  margin: auto;
}

.bottom {
  //margin-top: 20px;
  margin: 20px;
  text-align: right;
}

.placeholder-tab {
  width: 10px;
}

//::v-deep .cell{
//  text-align: center;
//}

//elementui row style
.grid-content {
  line-height: 36px;
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}

.el-row {
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}



.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
